<template>
  <div class="profile-container">
    <div class="profile-header">
      <a-avatar class="profile-avatar" :size="80">{{userInfo.name}}</a-avatar>
      <div class="profile-info">
        <h2 class="nickname">{{ userInfo.name }}</h2>
        <p class="username">{{"账号：" + userInfo.account }}</p>
        <p class="username">{{"Token：" + userInfo.token }}</p>
      </div>
    </div>
    <div class="profile-details">
      <a-list>
        <a-list-item>
          <MailOutlined style="font-size: 20px"/>
          <span>{{userInfo.email??""}}</span>
        </a-list-item>
      </a-list>
      <a-collapse class="command-manual" :bordered="false">
        <a-collapse-panel key="commands" header="可用指令说明">
          <a-list item-layout="horizontal" :data-source="commands">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta :description="item.desc">
                  <template #title>
                    <code>{{ item.name }}</code>
                    <span class="example">{{ item.example }}</span>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-collapse-panel>
      </a-collapse>
      <div class="logout-btn-container">
        <a-button
          type="primary"
          danger
          block
          @click="handleLogout"
          class="logout-btn"
        >
          <template #icon>
            <LogoutOutlined />
          </template>
          退出登录
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { message } from 'ant-design-vue';
import { LogoutOutlined, MailOutlined } from '@ant-design/icons-vue';

export default {
  components: {
    LogoutOutlined,
    MailOutlined
  },
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      commands: [
        {
          name: '#system',
          desc: '切换系统角色',
          example: '示例: #system 你是一个中英文互译助手'
        },
        {
          name: '#clear',
          desc: '清空该对话记忆',
          example: '示例: #clear'
        }
      ]
    }
  },
  methods: {
    handleLogout() {
      // 这里添加退出登录逻辑
      this.$store.dispatch("clearLoginUser")
      message.success('退出登录成功');
    }
  }
}
</script>

<style scoped>
.command-manual {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  :deep(.ant-collapse-header) {
    font-weight: 500;
    color: #2c3e50;
  }

  code {
    color: #1890ff;
    background: rgba(24, 144, 255, 0.1);
    border-radius: 4px;
  }

  .example {
    margin-left: 12px;
    color: #7f8c8d;
    font-size: 0.9em;
  }
}

.profile-container {
  background: #f6f6f6;
  min-height: 100vh;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  padding-bottom: 60px; /* 为底部导航留出空间 */
}

.profile-header {
  display: flex;
  align-items: center;
  padding: 20px;
  background: #ffffff;
  border-bottom: 1px solid #eaeaea;
}

.profile-avatar {
  margin-right: 15px;
  border-radius: 8px;
  background-color: #5f84b6;
  color: white;
  font-weight: bold;
}

.profile-info {
  display: flex;
  flex-direction: column;
}

.nickname {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.username {
  font-size: 14px;
  color: #888;
  margin: 2px 0;
}

.profile-details {
  margin-top: 10px;
  background: #ffffff;
}

:deep(.ant-list-item) {
  display: flex;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid #eaeaea;
}

.logout-btn-container {
  margin: 16px 80px;
  padding-top: 80px;
}

.logout-btn {
  height: 40px;
  font-weight: 500;
}

.logout-btn :deep(.anticon) {
  margin-right: 8px;
}
</style>